<template>
	<view class="container">
		<view class="box">
			<image class="logo" src="../../static/soccer1.png" />
		<br />
		<text class="register">用户注册</text>
		<input name="account" type="text" placeholder="请输入账号" v-model="account">
		<br />
		<input name="username" type="text" placeholder="请输入用户名" v-model="username">
		<br />
		<input name="password" type="password" placeholder="请输入密码" v-model="password">
		<br />
		<input name="phone" type="text" placeholder="请输入电话" v-model="phone">
		<br />
		<input name="sex" type="text" placeholder="请输入性别" v-model="sex">
		<br />
		<view class="birth">
			<view class="birthText">生日</view>
			<picker mode="date" :value="birthday" start="1900-01-01" end="2030-12-31" @change="handleDateChange">
				<view class="picker-label">{{ birthday }}</view>
			</picker>
			{{birth}}
		</view>
		<input name="mail" type="text" placeholder="请输入邮箱" v-model="mail">
		<br />
		<!-- 		<navigator url="/pages/login/login"> -->
		<button class="button" type="primary" @click="onClick">
			注册
		</button>
		</view>
		<!-- 		</navigator> -->
		<view>
			<!-- 提示窗示例 -->
			<uni-popup ref="alertDialog" type="dialog">
				<uni-popup-dialog type="success" cancelText="取消" confirmText="确认" title="通知" content="您已注册成功,欢迎您使用本App"
					@confirm="dialogConfirm" @close="dialogClose"></uni-popup-dialog>
			</uni-popup>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		baseUrl
	} from '../../tool/tool';
	import axios from 'axios';
	const username = ref();
	const password = ref();
	const phone = ref();
	const sex = ref();
	const mail = ref();
	const account = ref();
	const alertDialog = ref(null);
	const birthday = ref('2005-06-10');

	function dialogConfirm() {
		uni.navigateTo({
			url: "/pages/login/login"
		})
	}

	function dialogClose() {
		uni.navigateTo({
			url: "/pages/login/login"
		})
	}

	const handleDateChange = (e) => {
		birthday.value = e.detail.value;
		console.log(birthday.value);
	};

	function onClick() {
		if (alertDialog.value) {
			alertDialog.value.open();
		}

		uni.request({
			url: baseUrl + "/UserAccount/regist",
			method: "POST",
			data: {
				username: username.value,
				account: account.value,
				password: password.value,
				phone: phone.value,
				email: mail.value,
				birthday: birthday.value,
				sex: sex.value
			},
			success(res) {
				if (res.data) {
					console.log("success");
				} else {
					console.log("faild");
				}
			}

		})
	}
</script>

<style lang="scss" scoped>
	$charcoal: #444;
	$grey: #f3f4f4;
	$link: #3a8bbb;
	$pink: #ea4c89;
	$slate: #9da3a5;
	$white: #fff;
	
	@import url('https://fonts.googleapis.com/css?family=Work+Sans:400,500,600');
	$title-text: 'Work Sans', sans-serif;
	$charcoal: #444;
	$grey: #f3f4f4;
	$link: #3a8bbb;
	$pink: #ea4c89;
	$slate: #9da3a5;
	$white: #fff;
	
	@import url('https://fonts.googleapis.com/css?family=Work+Sans:400,500,600');
	$title-text: 'Work Sans', sans-serif;
	
	html, body {
	  align-items: center;
	  display: flex;
	  height: 100vh;
	  justify-content: center;
	  margin: auto;
	}
	
	body {
	  background: $grey;
	  font-family: $title-text;
	  -webkit-font-smoothing: antialiased;
	  -moz-osx-font-smoothing: grayscale;
	}
	
	.container {
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  height: 100vh;
	  width: 100vw;
	}
	
	.box {
	  background: $white;
	  border-radius: .625rem;
	  box-shadow: 0 0 40px 0 rgba(66, 133, 244, 0.6);
	  display: flex;
	  flex-direction: column;
	  height: 40.25rem;
	  position: absolute;
	  width: 18.75rem;
	  align-items: center;
	}
	
	.logo,
	.signin,
	input,
	button,
	.foot-txt,
	.logo {
	  height: 3.125rem;
	  margin-top: 1.875rem;
	  width: 3.125rem;
	}
	.register {
	  font: 600 1.8rem $title-text;
	  padding: .17em;
	}
	.text {
		margin-top: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 40rpx;
		margin-bottom: 150rpx;
	}

	.account {
		width: 70%;
		margin-top: 60rpx;
		border-radius: 20rpx;
		margin: 0 auto;
		margin-bottom: 60rpx;
	}

	.username {
		width: 70%;
		margin-top: 60rpx;
		border-radius: 20rpx;
		margin: 0 auto;
		margin-bottom: 60rpx;
	}

	.password {
		width: 70%;
		margin-top: 60rpx;
		margin: 0 auto;
		margin-bottom: 60rpx;
		border-radius: 20rpx;
	}

	.phone {
		width: 70%;
		margin-top: 60rpx;
		margin: 0 auto;
		margin-bottom: 60rpx;
		border-radius: 20rpx;
	}

	.sex {
		width: 70%;
		margin-top: 60rpx;
		margin: 0 auto;
		margin-bottom: 60rpx;
		border-radius: 20rpx;
	}

	.birth {
		display: flex;
		margin-top: 40rpx;
		margin-bottom: 40rpx;
		margin-left: 50rpx;

		.birthText {
			color: #999;
		}
		.picker-label {
			width: 400rpx;
			margin-right: 30rpx;
		}
	}

	.mail {
		width: 70%;
		margin-top: 60rpx;
		margin: 0 auto;
		margin-bottom: 60rpx;
		border-radius: 20rpx;
	}

	.button {
		width: 40%;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 20rpx;
		/* 添加圆角效果 */
	}
	input {
	  -webkit-appearance: none;
	  -moz-appearance: none;
	  background: none;
	  border: 0;
	  border-bottom: 2px solid $slate;
	  font: 500 .9rem $title-text, sans-serif;
	  height: 2.15em;
	  margin-top: .7em;
	  transition: all .15s ease-out;
	  -webkit-transition: all .15s ease-out;
	  width: 80%;
	}
	
	input:focus {
	  border-bottom: 2px solid $pink;
	  outline: none;
	}
	
	::placeholder {
	  color: $slate;
	}
</style>